<template>
  <div v-if="src" v-loading="loading" :style="'height:' + height">
    <iframe ref="iframe" :src="src" frameborder="no" style="width: 100%; height: 100%" scrolling="auto"></iframe>
  </div>
</template>
  <script>
import qs from 'qs';
export default {
  name: 'AnvilIframe',
  props: {
    url: {
      type: String,
      default: '' // 默认值
    }
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + 'px;',
      loading: true,
      src: '',
      show: false
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 230);
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const that = this;
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 94.5 + 'px;';
    };
  },
  methods: {
    init(newQuery) {
      if (this.src) {
        this.src = '';
      }
      if (this.url.startsWith('http')) {
        this.src = this.url + '?' + qs.stringify(newQuery);
      } else {
        // 解析出原本url中的path和query
        const RouteObj = this.$router.resolve(this.url);
        const { query, path } = RouteObj;
        const Query = {
          ...query,
          ...newQuery
        };
        console.log('iframe src: ', path);
        // 处理路由的哈希模式, pathname + hash + query
        this.src = location.pathname +  '#' + path + '?' + qs.stringify(Query);
      }
    }
  }
};
</script>
  